<template>
    <div>
        <div :style='{"padding":"12px","boxShadow":"0 0px 6px #ccc","margin":"0px auto","borderColor":"#fff","borderRadius":"0px","background":"linear-gradient(180deg, #eee 0%,  #eee 100%)","borderWidth":"1px 0 1px 0","width":"100%","borderStyle":"solid"}'
             class="breadcrumb-preview">
            <el-breadcrumb :separator="'Ξ'"
                           :style='{"width":"1200px","margin":"0 auto","fontSize":"14px","lineHeight":"1"}'>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item v-for="(item, index) in breadcrumbItem" :key="index">{{item.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="detail-preview"
             :style='{"padding":"0 0 24px","margin":"0px auto","flexWrap":"wrap","display":"flex","width":"1200px","position":"relative","justifyContent":"space-between"}'>
            <div class="attr"
                 :style='{"border":"1px solid #eee","padding":"12px 0px 20px 0px","boxShadow":"0px 0px 0px #ddd,inset 0px 0px 0px 0px #e0f8e8","margin":"20px 0 20px 0","display":"flex","justifyContent":"space-between","minHeight":"600px","overflow":"hidden","borderRadius":"4px","flexWrap":"wrap","background":"url(http://codegen.caihongy.cn/20221123/02b65dd190a741a1ae9c37c17624c5aa.jpg) fixed center top no-repeat,#d4f2f3","width":"1200px","position":"relative"}'>
                <el-carousel :style='{"width":"575px","margin":"20px 0px 0 0","float":"left","height":"320px"}'
                             trigger="click" indicator-position="inside" arrow="always" type="card"
                             direction="horizontal" height="320px" autoplay="true" interval="3000" loop="true">
                    <el-carousel-item :style='{"borderRadius":"0","width":"100%","height":"100%"}'
                                      v-for="item in detailBanner" :key="item.id">
                        <el-image :style='{"objectFit":"cover","width":"50%","height":"100%"}'
                                  v-if="item.substr(0,4)=='http'" :src="item" fit="cover" class="image"></el-image>
                        <el-image :style='{"objectFit":"cover","width":"50%","height":"100%"}' v-else
                                  :src="baseUrl + item" fit="cover" class="image"></el-image>
                    </el-carousel-item>
                </el-carousel>


               


                <div class="info"
                     :style='{"width":"575px","padding":"0px 0 20px","margin":"20px auto 0 auto","background":"none","height":"auto","order":"2"}'>
                    <div class="item"
                         :style='{"border":"0px solid #b0d2f2","padding":"6px 10px","boxShadow":"2px 2px 4px #87bfc2","margin":"0 0 16px 0","alignItems":"center","borderRadius":"0px","background":"radial-gradient(circle, rgba(43,224,232,1) 0%, rgba(0,173,181,1) 100%)","display":"flex","justifyContent":"space-between"}'>
                        <div :style='{"color":"#fff","fontSize":"16px"}'>
                            {{detail.attractionname}}
                        </div>
                        <div @click="storeup(1)" v-show="!isStoreup"
                             :style='{"cursor":"pointer","padding":"8px 8px","borderRadius":"4px","background":"#fff"}'>
                            <i v-if="true" :style='{"color":"#00adb5","fontSize":"14px"}'
                               class="el-icon-star-off"></i><span
                                :style='{"color":"#00adb5","fontSize":"14px"}'>点我收藏</span></div>
                        <div @click="storeup(-1)" v-show="isStoreup"
                             :style='{"cursor":"pointer","padding":"8px 8px","borderRadius":"4px","background":"#fff"}'>
                            <i v-if="true" :style='{"color":"#00adb5","fontSize":"14px"}'
                               class="el-icon-star-on"></i><span
                                :style='{"color":"#00adb5","fontSize":"14px"}'>取消收藏</span></div>
                    </div>


                    <div class="item"
                         :style='{"border":"0px solid #b0d2f2","padding":"6px 10px","boxShadow":"2px 2px 4px #87bfc2","margin":"0 0 16px 0","alignItems":"center","borderRadius":"0px","background":"radial-gradient(circle, rgba(43,224,232,1) 0%, rgba(0,173,181,1) 100%)","display":"flex","justifyContent":"space-between"}'>
                        <div :style='{"color":"#fff","fontSize":"16px"}'>
                            {{detail.linename}}
                        </div>
                    </div>

                    <div class="item"
                         :style='{"padding":"0px 10px","boxShadow":"0px 0px 0px #ddd","margin":"0 0 6px 0","borderColor":"#ddd","borderRadius":"0px","background":"rgba(255,255,255,.6)","borderWidth":"1px 1px 1px 1px","display":"flex","borderStyle":"dashed","justifyContent":"spaceBetween"}'>
                        <div class="lable"
                             :style='{"padding":"0 10px","color":"#333","textAlign":"right","width":"130px","fontSize":"14px","lineHeight":"40px","minWidth":"130px"}'>
                            线路类型
                        </div>
                        <div :style='{"width":"498px","padding":"8px 10px 0","fontSize":"14px","lineHeight":"24px","color":"#666","height":"auto"}'>
                            {{detail.routetype}}
                        </div>
                    </div>
                    <div class="item"
                         :style='{"padding":"0px 10px","boxShadow":"0px 0px 0px #ddd","margin":"0 0 6px 0","borderColor":"#ddd","borderRadius":"0px","background":"rgba(255,255,255,.6)","borderWidth":"1px 1px 1px 1px","display":"flex","borderStyle":"dashed","justifyContent":"spaceBetween"}'>
                        <div class="lable"
                             :style='{"padding":"0 10px","color":"#333","textAlign":"right","width":"130px","fontSize":"14px","lineHeight":"40px","minWidth":"130px"}'>
                            出发地
                        </div>
                        <div :style='{"width":"498px","padding":"8px 10px 0","fontSize":"14px","lineHeight":"24px","color":"#666","height":"auto"}'>
                            {{detail.departureplace}}
                        </div>
                    </div>
                    <div class="item"
                         :style='{"padding":"0px 10px","boxShadow":"0px 0px 0px #ddd","margin":"0 0 6px 0","borderColor":"#ddd","borderRadius":"0px","background":"rgba(255,255,255,.6)","borderWidth":"1px 1px 1px 1px","display":"flex","borderStyle":"dashed","justifyContent":"spaceBetween"}'>
                        <div class="lable"
                             :style='{"padding":"0 10px","color":"#333","textAlign":"right","width":"130px","fontSize":"14px","lineHeight":"40px","minWidth":"130px"}'>
                            目的地
                        </div>
                        <div :style='{"width":"498px","padding":"8px 10px 0","fontSize":"14px","lineHeight":"24px","color":"#666","height":"auto"}'>
                            {{detail.destination}}
                        </div>
                    </div>

                    <div class="item"
                         :style='{"padding":"0px 10px","boxShadow":"0px 0px 0px #ddd","margin":"0 0 6px 0","borderColor":"#ddd","borderRadius":"0px","background":"rgba(255,255,255,.6)","borderWidth":"1px 1px 1px 1px","display":"flex","borderStyle":"dashed","justifyContent":"spaceBetween"}'>
                        <div class="lable"
                             :style='{"padding":"0 10px","color":"#333","textAlign":"right","width":"130px","fontSize":"14px","lineHeight":"40px","minWidth":"130px"}'>
                            价格
                        </div>
                        <div :style='{"width":"498px","padding":"8px 10px 0","fontSize":"14px","lineHeight":"24px","color":"#666","height":"auto"}'>
                            {{detail.jine}}
                        </div>
                    </div>
                    <div class="item"
                         :style='{"padding":"0px 10px","boxShadow":"0px 0px 0px #ddd","margin":"0 0 6px 0","borderColor":"#ddd","borderRadius":"0px","background":"rgba(255,255,255,.6)","borderWidth":"1px 1px 1px 1px","display":"flex","borderStyle":"dashed","justifyContent":"spaceBetween"}'>
                        <div class="lable"
                             :style='{"padding":"0 10px","color":"#333","textAlign":"right","width":"130px","fontSize":"14px","lineHeight":"40px","minWidth":"130px"}'>
                            出行时间
                        </div>
                        <div :style='{"width":"498px","padding":"8px 10px 0","fontSize":"14px","lineHeight":"24px","color":"#666","height":"auto"}'>
                            {{detail.traveltime}}
                        </div>
                    </div>
                    <div class="item"
                         :style='{"padding":"0px 10px","boxShadow":"0px 0px 0px #ddd","margin":"0 0 6px 0","borderColor":"#ddd","borderRadius":"0px","background":"rgba(255,255,255,.6)","borderWidth":"1px 1px 1px 1px","display":"flex","borderStyle":"dashed","justifyContent":"spaceBetween"}'>
                        <div class="lable"
                             :style='{"padding":"0 10px","color":"#333","textAlign":"right","width":"130px","fontSize":"14px","lineHeight":"40px","minWidth":"130px"}'>
                            出行天数
                        </div>
                        <div :style='{"width":"498px","padding":"8px 10px 0","fontSize":"14px","lineHeight":"24px","color":"#666","height":"auto"}'>
                            {{detail.traveldays}}
                        </div>
                    </div>
                    <div class="item"
                         :style='{"padding":"0px 10px","boxShadow":"0px 0px 0px #ddd","margin":"0 0 6px 0","borderColor":"#ddd","borderRadius":"0px","background":"rgba(255,255,255,.6)","borderWidth":"1px 1px 1px 1px","display":"flex","borderStyle":"dashed","justifyContent":"spaceBetween"}'>
                        <div class="lable"
                             :style='{"padding":"0 10px","color":"#333","textAlign":"right","width":"130px","fontSize":"14px","lineHeight":"40px","minWidth":"130px"}'>
                            交通工具
                        </div>
                        <div :style='{"width":"498px","padding":"8px 10px 0","fontSize":"14px","lineHeight":"24px","color":"#666","height":"auto"}'>
                            {{detail.transportation}}
                        </div>
                    </div>
                    <div class="item"
                         :style='{"padding":"0px 10px","boxShadow":"0px 0px 0px #ddd","margin":"0 0 6px 0","borderColor":"#ddd","borderRadius":"0px","background":"rgba(255,255,255,.6)","borderWidth":"1px 1px 1px 1px","display":"flex","borderStyle":"dashed","justifyContent":"spaceBetween"}'>
                        <div class="lable"
                             :style='{"padding":"0 10px","color":"#333","textAlign":"right","width":"130px","fontSize":"14px","lineHeight":"40px","minWidth":"130px"}'>
                            途径景点
                        </div>
                        <div :style='{"width":"498px","padding":"8px 10px 0","fontSize":"14px","lineHeight":"24px","color":"#666","height":"auto"}'>
                            {{detail.routeattraction}}
                        </div>
                    </div>
                    <div class="item"
                         :style='{"padding":"0px 10px","boxShadow":"0px 0px 0px #ddd","margin":"0 0 6px 0","borderColor":"#ddd","borderRadius":"0px","background":"rgba(255,255,255,.6)","borderWidth":"1px 1px 1px 1px","display":"flex","borderStyle":"dashed","justifyContent":"spaceBetween"}'>
                        <div class="lable"
                             :style='{"padding":"0 10px","color":"#333","textAlign":"right","width":"130px","fontSize":"14px","lineHeight":"40px","minWidth":"130px"}'>
                            发布日期
                        </div>
                        <div :style='{"width":"498px","padding":"8px 10px 0","fontSize":"14px","lineHeight":"24px","color":"#666","height":"auto"}'>
                            {{detail.releasedate}}
                        </div>
                    </div>
                    <div class="btn" :style='{"padding":"10px 0","flexWrap":"wrap","display":"flex"}'>
                        <el-button
                                :style='{"border":"0","cursor":"pointer","padding":"0 10px","margin":"0 5px 0 0","outline":"none","color":"#333","borderRadius":"4px","background":"#c5ddfb","width":"auto","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                                v-if="isAuth('routeplanning','预订')" @click="onAcross('xianluyuding','','','')"
                                type="warning">预订
                        </el-button>
                    </div>
                </div>

            </div>


            <el-tabs class="detail"
                     :style='{"border":"1px solid #eee","minHeight":"350px","boxShadow":"0px 0px 0px #ddd,inset 0px 0px 0px 0px #e0f8e8","padding":"20px","margin":"20px 0 0","borderRadius":"4px","background":"#FFF","width":"1200px"}'
                     v-model="activeName" type="border-card">
                <el-tab-pane label="详情" name="first">
                    <div v-html="detail.details"></div>
                </el-tab-pane>
                <el-tab-pane label="评论" name="second">
                    <el-form class="add comment" :style='{"padding":"0px","margin":"12px 0 20px"}' :model="form"
                             :rules="rules" ref="form">
                        <el-form-item class="item"
                                      :style='{"border":"1px solid #e6e6e6","boxShadow":"2px 4px 8px #eee,inset 0px 0px 100px 0px #f6f6f6","borderRadius":"8px","background":"#fff","display":"flex","width":"100%","height":"auto"}'
                                      label="评论" prop="content">
                            <el-input type="textarea" :rows="5" v-model="form.content" placeholder="请输入内容"></el-input>
                        </el-form-item>
                        <el-form-item class="btn"
                                      :style='{"width":"100%","padding":"0 0 0 20px","margin":"10px 0 0","height":"auto"}'>
                            <el-button
                                    :style='{"border":"0","cursor":"pointer","padding":"0","boxShadow":"1px 2px 8px #ccc","margin":"0 20px 0 0","color":"#fff","outline":"none","borderRadius":"4px","background":"radial-gradient(circle, rgba(43,224,232,1) 0%, rgba(0,173,181,1) 100%)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                                    type="primary" @click="submitForm('form')">立即提交
                            </el-button>
                            <el-button
                                    :style='{"border":"1px solid #bbb","cursor":"pointer","padding":"0","boxShadow":"4px 4px 8px #eee","margin":"0 20px 0 0","color":"#999","outline":"none","borderRadius":"4px","background":"#fff","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                                    @click="resetForm('form')">重置
                            </el-button>
                        </el-form-item>
                    </el-form>

                    <div v-if="infoList.length"
                         :style='{"boxShadow":"0 0px 0px 0 rgba(0, 0, 0, .1)","padding":"20px 0 0"}' class="comment">
                        <div :style='{"padding":"0px 0","margin":"0 0 8px","borderColor":"#b4ebc8","alignItems":"center","borderWidth":"0 0 0px 0","width":"100%","borderStyle":"solid","height":"auto"}'
                             v-for="item in infoList" :key="item.id">
                            <div class="user"
                                 :style='{"padding":"4px","alignItems":"center","borderRadius":"4px","background":"#f6f6f6","display":"flex","width":"100%","height":"auto"}'>
                                <el-image v-if="item.avatarurl"
                                          :style='{"width":"32px","margin":"0 10px 0 0","borderRadius":"100%","objectFit":"cover","height":"32px"}'
                                          :size="50" :src="baseUrl + item.avatarurl"></el-image>
                                <el-image v-if="!item.avatarurl"
                                          :style='{"width":"32px","margin":"0 10px 0 0","borderRadius":"100%","objectFit":"cover","height":"32px"}'
                                          :size="50" :src="require('@/assets/touxiang.png')"></el-image>
                                <div :style='{"color":"#333","fontSize":"16px"}' class="name">{{item.nickname}}</div>
                            </div>
                            <div :style='{"padding":"8px","margin":"8px 0px 0px","color":"#666","borderRadius":"4px","background":"none","lineHeight":"24px","fontSize":"14px","textIndent":"2em"}'
                                 class="content-block-ask">
                                {{item.content}}
                            </div>
                            <div :style='{"padding":"8px","margin":"8px 0px 0px","color":"#666","borderRadius":"4px","background":"none","lineHeight":"24px","fontSize":"14px","textIndent":"2em"}'
                                 class="content-block-reply" v-if="item.reply">
                                回复：{{item.reply}}
                            </div>
                        </div>
                    </div>

                    <el-pagination
                            background
                            class="pagination"
                            :pager-count="7"
                            :page-size="pageSize"
                            :page-sizes="pageSizes"
                            prev-text="<"
                            next-text=">"
                            :hide-on-single-page="true"
                            :layout='["total","prev","pager","next","sizes","jumper"].join()'
                            :total="total"
                            :style='{"padding":"0","margin":"20px auto","whiteSpace":"nowrap","color":"#333","width":"1200px","fontWeight":"500","order":"4"}'
                            @current-change="curChange"
                            @prev-click="prevClick"
                            @next-click="nextClick"
                    ></el-pagination>
                </el-tab-pane>

            </el-tabs>
        </div>
    </div>
</template>

<script>
    import CountDown from '@/components/CountDown';

    export default {
        //数据集合
        data() {
            return {
                tablename: 'routeplanning',
                baseUrl: '',
                breadcrumbItem: [
                    {
                        name: '详情信息'
                    }
                ],
                title: '',
                storeupParams: {
                    name: '',
                    picture: '',
                    refid: 0,
                    tablename: 'routeplanning',
                    userid: localStorage.getItem('userid')
                },
                isStoreup: false,
                storeupInfo: {},

                isCrazilynum: false,
                isThumbsupnum: false,
                thumbsupOrCrazilyInfo: {},
                detailBanner: [],
                endTime: 0,
                detail: {},
                activeName: 'first',
                form: {
                    content: '',
                    userid: localStorage.getItem('userid'),
                    nickname: localStorage.getItem('username'),
                    avatarurl: '',
                },
                infoList: [],
                total: 1,
                pageSize: 5,
                pageSizes: [10, 20, 30, 50],
                totalPage: 1,
                rules: {
                    content: [
                        {required: true, message: '请输入内容', trigger: 'blur'}
                    ]
                },
                buynumber: 1,
            }
        },
        created() {
            this.init();
        },
        //方法集合
        methods: {


            onAcross(acrossTable, crossOptAudit, statusColumnName, tips, statusColumnValue) {
                localStorage.setItem('crossTable', `routeplanning`);
                localStorage.setItem('crossObj', JSON.stringify(this.detail));
                localStorage.setItem('statusColumnName', statusColumnName);
                localStorage.setItem('statusColumnValue', statusColumnValue);
                localStorage.setItem('tips', tips);
                if (statusColumnName != '' && !statusColumnName.startsWith("[")) {
                    var obj = JSON.parse(localStorage.getItem('crossObj'));
                    for (var o in obj) {
                        if (o == statusColumnName && obj[o] == statusColumnValue) {
                            this.$message({
                                type: 'success',
                                message: tips,
                                duration: 1500
                            });
                            return
                        }
                    }
                }
                this.$router.push({path: '/index/' + acrossTable + 'Add', query: {type: 'cross'}});
            },


            init() {
                this.baseUrl = this.$config.baseUrl;
                if (this.$route.query.detailObj) {
                    this.detail = JSON.parse(this.$route.query.detailObj);
                }
                if (this.$route.query.storeupObj) {
                    this.detail.id = JSON.parse(this.$route.query.storeupObj).refid;
                }

                this.$http.get(this.tablename + '/detail/' + this.detail.id, {}).then(res => {
                    if (res.data.code == 0) {
                        this.detail = res.data.data;
                        this.title = this.detail.linename;
                        this.detailBanner = this.detail.lineimage ? this.detail.lineimage.split(",") : [];
                        this.$forceUpdate();
                    }
                });

                this.getDiscussList(1);
                this.getStoreupStatus();
                this.getThumbsupOrCrazilyStatus();

            },
            curChange(page) {
                this.getDiscussList(page);
            },
            prevClick(page) {
                this.getDiscussList(page);
            },
            nextClick(page) {
                this.getDiscussList(page);
            },

            storeup(type) {
                if (type == 1 && !this.isStoreup) {
                    this.storeupParams.name = this.title;
                    this.storeupParams.picture = this.detailBanner[0];
                    this.storeupParams.refid = this.detail.id;
                    this.storeupParams.type = type;
                    this.$http.post('storeup/add', this.storeupParams).then(res => {
                        if (res.data.code == 0) {
                            this.isStoreup = true;
                            this.$message({
                                type: 'success',
                                message: '收藏成功!',
                                duration: 1500,
                            });
                        }
                    });
                }
                if (type == -1 && this.isStoreup) {
                    this.$http.get('storeup/list', {
                        params: {
                            page: 1,
                            limit: 1,
                            type: 1,
                            refid: this.detail.id,
                            tablename: 'routeplanning',
                            userid: localStorage.getItem('userid')
                        }
                    }).then(res => {
                        if (res.data.code == 0 && res.data.data.list.length > 0) {
                            this.isStoreup = true;
                            this.storeupInfo = res.data.data.list[0];
                            let delIds = new Array();
                            delIds.push(this.storeupInfo.id);
                            this.$http.post('storeup/delete', delIds).then(res => {
                                if (res.data.code == 0) {
                                    this.isStoreup = false;
                                    this.$message({
                                        type: 'success',
                                        message: '取消成功!',
                                        duration: 1500,
                                    });
                                }
                            });
                        }
                    });
                }
            },
            getStoreupStatus() {
                if (localStorage.getItem("Token")) {
                    this.$http.get('storeup/list', {
                        params: {
                            page: 1,
                            limit: 1,
                            type: 1,
                            refid: this.detail.id,
                            tablename: 'routeplanning',
                            userid: localStorage.getItem('userid')
                        }
                    }).then(res => {
                        if (res.data.code == 0 && res.data.data.list.length > 0) {
                            this.isStoreup = true;
                            this.storeupInfo = res.data.data.list[0];
                        }
                    });
                }
            },
            thumbsupOrCrazily(type) {
                this.storeupParams.name = this.title;
                this.storeupParams.picture = this.detailBanner[0];
                this.storeupParams.refid = this.detail.id;
                this.storeupParams.type = type;
                this.$http.post('storeup/add', this.storeupParams).then(res => {
                    if (res.data.code == 0) {
                        this.getThumbsupOrCrazilyStatus();
                        this.$message({
                            type: 'success',
                            message: '操作成功!',
                            duration: 1500,
                        });
                    }
                });

                if (type == 21) this.detail.thumbsupnum = Number(this.detail.thumbsupnum) + 1;
                if (type == 22) this.detail.crazilynum = Number(this.detail.crazilynum) + 1;
                this.$http.post('routeplanning/update', this.detail).then(res => {
                });
            },
            cancelThumbsupOrCrazily(type) {
                let delIds = new Array();
                delIds.push(this.thumbsupOrCrazilyInfo.id);
                this.$http.post('storeup/delete', delIds).then(res => {
                    if (res.data.code == 0) {
                        this.isThumbsupnum = false;
                        this.isCrazilynum = false;
                        this.$message({
                            type: 'success',
                            message: '取消成功!',
                            duration: 1500,
                        });
                    }
                });

                if (type == 21) this.detail.thumbsupnum -= 1;
                if (type == 22) this.detail.crazilynum -= 1;
                this.$http.post('routeplanning/update', this.detail).then(res => {
                });
            },
            getThumbsupOrCrazilyStatus() {
                if (localStorage.getItem("Token")) {
                    this.$http.get('storeup/list', {
                        params: {
                            page: 1,
                            limit: 1,
                            type: 21,
                            refid: this.detail.id,
                            tablename: 'routeplanning',
                            userid: localStorage.getItem('userid')
                        }
                    }).then(res => {
                        if (res.data.code == 0 && res.data.data.list.length > 0) {
                            this.isThumbsupnum = true;
                            this.thumbsupOrCrazilyInfo = res.data.data.list[0];
                        }
                    });

                    this.$http.get('storeup/list', {
                        params: {
                            page: 1,
                            limit: 1,
                            type: 22,
                            refid: this.detail.id,
                            tablename: 'routeplanning',
                            userid: localStorage.getItem('userid')
                        }
                    }).then(res => {
                        if (res.data.code == 0 && res.data.data.list.length > 0) {
                            this.isCrazilynum = true;
                            this.thumbsupOrCrazilyInfo = res.data.data.list[0];
                        }
                    });
                }
            },


            // 下载
            download(file) {
                if (!file) {
                    this.$message({
                        type: 'error',
                        message: '文件不存在',
                        duration: 1500,
                    });
                    return;
                }
                window.open(this.baseUrl + file)
            },
            getDiscussList(page) {
                this.$http.get('discussrouteplanning/list', {
                    params: {
                        page,
                        limit: this.pageSize,
                        refid: this.detail.id
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        this.infoList = res.data.data.list;
                        this.total = res.data.data.total;
                        this.pageSize = res.data.data.pageSize;
                        this.pageSizes = [this.pageSize, this.pageSize * 2, this.pageSize * 3, this.pageSize * 5];
                        this.totalPage = res.data.data.totalPage;
                    }
                });
            },
            submitForm(formName) {
                let sensitiveWords = "";
                let sensitiveWordsArr = [];
                if (sensitiveWords) {
                    sensitiveWordsArr = sensitiveWords.split(",");
                }
                for (var i = 0; i < sensitiveWordsArr.length; i++) {
                    //全局替换
                    var reg = new RegExp(sensitiveWordsArr[i], "g");
                    //判断内容中是否包括敏感词
                    if (this.form.content.indexOf(sensitiveWordsArr[i]) > -1) {
                        // 将敏感词替换为 **
                        this.form.content = this.form.content.replace(reg, "**");
                    }
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.form.refid = this.detail.id;
                        this.form.avatarurl = localStorage.getItem('headportrait') ? localStorage.getItem('headportrait') : '';
                        this.$http.post('discussrouteplanning/add', this.form).then(res => {
                            if (res.data.code == 0) {
                                this.form.content = '';
                                this.getDiscussList(1);
                                this.$message({
                                    type: 'success',
                                    message: '评论成功!',
                                    duration: 1500,
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },


        },
        components: {
            CountDown
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .detail-preview {

        .attr {
            .el-carousel /deep/ .el-carousel__indicator button {
                width: 0;
                height: 0;
                display: none;
            }

            .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled), .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
                border-color: none;
            }
        }

        .detail {
            & /deep/ .el-tabs__header .el-tabs__nav-wrap {
                margin-bottom: 0;
            }

            & .add .el-textarea {
                width: auto;
            }
        }
    }

    .attr .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--left {
        width: 36px;
        font-size: 12px;
        height: 36px;
    }

    .attr .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--left:hover {
        background: #70b3f1;
    }

    .attr .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--right {
        width: 36px;
        font-size: 12px;
        height: 36px;
    }

    .attr .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--right:hover {
        background: #70b3f1;
    }

    .attr .el-carousel /deep/ .el-carousel__indicators {
        padding: 0;
        margin: 0 0 0 0;
        z-index: 2;
        position: absolute;
        list-style: none;
    }

    .attr .el-carousel /deep/ .el-carousel__indicators li {
        border-radius: 50%;
        padding: 0;
        margin: 0 4px;
        background: #fff;
        display: inline-block;
        width: 12px;
        opacity: 0.4;
        transition: 0.3s;
        height: 12px;
    }

    .attr .el-carousel /deep/ .el-carousel__indicators li:hover {
        border-radius: 50%;
        padding: 0;
        margin: 0 4px;
        background: #fff;
        display: inline-block;
        width: 12px;
        opacity: 0.7;
        height: 12px;
    }

    .attr .el-carousel /deep/ .el-carousel__indicators li.is-active {
        border-radius: 50%;
        padding: 0;
        margin: 0 4px;
        background: #fff;
        display: inline-block;
        width: 12px;
        opacity: 1;
        height: 12px;
    }

    .attr .el-input-number /deep/ .el-input-number__decrease {
        cursor: pointer;
        z-index: 1;
        display: flex;
        border-color: #DCDFE6;
        border-radius: 4px 0 0 4px;
        top: 1px;
        left: 1px;
        background: #f5f5f5;
        width: 40px;
        justify-content: center;
        border-width: 0 1px 0 0;
        align-items: center;
        position: absolute;
        border-style: solid;
        text-align: center;
        height: 38px;
    }

    .attr .el-input-number /deep/ .el-input-number__decrease i {
        color: #666;
        font-size: 14px;
    }

    .attr .el-input-number /deep/ .el-input-number__increase {
        cursor: pointer;
        z-index: 1;
        display: flex;
        border-color: #DCDFE6;
        right: 1px;
        border-radius: 0 4px 4px 0;
        top: 1px;
        background: #f5f5f5;
        width: 40px;
        justify-content: center;
        border-width: 0 0 0 1px;
        align-items: center;
        position: absolute;
        border-style: solid;
        text-align: center;
        height: 38px;
    }

    .attr .el-input-number /deep/ .el-input-number__increase i {
        color: #666;
        font-size: 14px;
    }

    .attr .el-input-number /deep/ .el-input .el-input__inner {
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        padding: 0 40px;
        outline: none;
        color: #666;
        background: #FFF;
        display: inline-block;
        width: 100%;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
        height: 40px;
    }

    .detail-preview .detail.el-tabs /deep/ .el-tabs__header {
        border-radius: 8px;
        padding: 0;
        margin: 0;
        background: #fff;
        width: 100%;
        border-color: #e4e7ed;
        border-width: 0;
        border-style: solid;
        text-align: center;
    }

    .detail-preview .detail.el-tabs /deep/ .el-tabs__header .el-tabs__item {
        border: 0;
        padding: 0 24px;
        margin: 0 0px 0 0px;
        color: #333;
        font-weight: 500;
        display: inline-block;
        font-size: 14px;
        line-height: 40px;
        border-radius: 4px;
        background: url(http://codegen.caihongy.cn/20221121/105dda983a8641cdb4b2e19309374203.png) no-repeat left top, url(http://codegen.caihongy.cn/20221121/2399c20d2b1642e7befa8c2a7aa12de3.png) no-repeat right bottom, linear-gradient(180deg, rgba(225, 240, 240, 1) 0%, rgba(225, 240, 240, 1) 50%, rgba(0, 173, 181, 1) 50%, rgba(0, 173, 181, 1) 100%);
        width: 140px;
        position: relative;
        list-style: none;
        text-align: center;
        height: 40px;
    }

    .detail-preview .detail.el-tabs /deep/ .el-tabs__header .el-tabs__item:hover {
        border: 0;
        border-radius: 4px;
        padding: 0 24px;
        margin: 0 0px 0 0px;
        color: #333;
        background: url(http://codegen.caihongy.cn/20221121/105dda983a8641cdb4b2e19309374203.png) no-repeat left top, url(http://codegen.caihongy.cn/20221121/2399c20d2b1642e7befa8c2a7aa12de3.png) no-repeat right bottom, linear-gradient(0deg, rgba(225, 240, 240, 1) 0%, rgba(225, 240, 240, 1) 50%, rgba(0, 173, 181, 1) 50%, rgba(0, 173, 181, 1) 100%);
        width: 140px;
        line-height: 40px;
        height: 40px;
    }

    .detail-preview .detail.el-tabs /deep/ .el-tabs__header .el-tabs__item.is-active {
        border: 0;
        border-radius: 4px;
        padding: 0 24px;
        margin: 0 0px 0 0px;
        color: #333;
        background: url(http://codegen.caihongy.cn/20221121/105dda983a8641cdb4b2e19309374203.png) no-repeat left top, url(http://codegen.caihongy.cn/20221121/2399c20d2b1642e7befa8c2a7aa12de3.png) no-repeat right bottom, linear-gradient(0deg, rgba(225, 240, 240, 1) 0%, rgba(225, 240, 240, 1) 50%, rgba(0, 173, 181, 1) 50%, rgba(0, 173, 181, 1) 100%);
        width: 140px;
        line-height: 40px;
        text-align: center;
        height: 40px;
    }

    .detail-preview .detail.el-tabs /deep/ .el-tabs__content {
        padding: 15px;
    }

    .detail-preview .detail.el-tabs .add /deep/ .el-form-item__label {
        padding: 0 10px 0 0;
        color: #666;
        width: 80px;
        font-size: 14px;
        line-height: 40px;
        text-align: right;
    }

    .detail-preview .detail.el-tabs .add /deep/ .el-textarea__inner {
        border: 0;
        border-radius: 4px;
        padding: 4px 12px;
        box-shadow: 0 0 0px rgba(64, 158, 255, .5);
        outline: none;
        color: #333;
        background: none;
        width: 1058px;
        font-size: 14px;
        min-height: 180px;
        line-height: 32px;
    }

    .breadcrumb-preview .el-breadcrumb /deep/ .el-breadcrumb__separator {
        margin: 0 9px;
        color: #ccc;
        font-weight: 500;
    }

    .breadcrumb-preview .el-breadcrumb /deep/ .el-breadcrumb__inner a {
        color: #333;
        display: inline-block;
    }

    .breadcrumb-preview .el-breadcrumb /deep/ .el-breadcrumb__inner {
        color: #999;
        display: inline-block;
    }

    .el-pagination /deep/ .el-pagination__total {
        margin: 0 10px 0 0;
        color: #666;
        font-weight: 400;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-prev {
        border: none;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #666;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        min-width: 35px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-next {
        border: none;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #666;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        min-width: 35px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-prev:disabled {
        border: none;
        cursor: not-allowed;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #C0C4CC;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-next:disabled {
        border: none;
        cursor: not-allowed;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #C0C4CC;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pager {
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: top;
    }

    .el-pagination /deep/ .el-pager .number {
        cursor: pointer;
        padding: 0 4px;
        margin: 0 5px;
        color: #666;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #f4f4f5;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pager .number:hover {
        cursor: pointer;
        padding: 0 4px;
        margin: 0 5px;
        color: #fff;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #00adb5;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pager .number.active {
        cursor: default;
        padding: 0 4px;
        margin: 0 5px;
        color: #FFF;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #00adb5;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__sizes {
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input {
        margin: 0 5px;
        width: 100px;
        position: relative;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
        border: 1px solid #DCDFE6;
        cursor: pointer;
        padding: 0 25px 0 8px;
        color: #606266;
        display: inline-block;
        font-size: 13px;
        line-height: 28px;
        border-radius: 3px;
        outline: 0;
        background: #FFF;
        width: 100%;
        text-align: center;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
        top: 0;
        position: absolute;
        right: 0;
        height: 100%;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
        cursor: pointer;
        color: #C0C4CC;
        width: 25px;
        font-size: 14px;
        line-height: 28px;
        text-align: center;
    }

    .el-pagination /deep/ .el-pagination__jump {
        margin: 0 0 0 24px;
        color: #606266;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__jump .el-input {
        border-radius: 3px;
        padding: 0 2px;
        margin: 0 2px;
        display: inline-block;
        width: 50px;
        font-size: 14px;
        line-height: 18px;
        position: relative;
        text-align: center;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
        border: 1px solid #DCDFE6;
        cursor: pointer;
        padding: 0 3px;
        color: #606266;
        display: inline-block;
        font-size: 14px;
        line-height: 28px;
        border-radius: 3px;
        outline: 0;
        background: #FFF;
        width: 100%;
        text-align: center;
        height: 28px;
    }
</style>
